/// 样式 * 登录页

import { css } from '@emotion/css'
import imgLogo from './assets/logo.png'
import imgLoginLogo from './assets/login-logo.png'
import bgImage from './assets/bg.jpg'

export const loginCSS = css`
  position: relative;
  ${wh()}
  ${bgImg(bgImage)}
  overflow: hidden;

  --var-header-height: 60px;
  --var-footer-height: 40px;
  --var-main-height: calc(100% - var(--var-header-height) - var(--var-footer-height));

  /* 头 */
  > header {
    position: relative;
    height: var(--var-header-height);
    background-color: rgba(255,255,255,0.6);
    border-bottom: 1px solid #FFFFFF;

    > .title {
      position: absolute;
      top: 8px;
      left: 180px;
      ${flex()}
      color: #268CFF;
      font-weight: 700;

      > .ex-icon {
        color: #268CFF;
        margin-bottom: 1px;
        margin-right: 12px;
      }

      ${before(css`
        margin-right: 12px;
        ${whpx(1, 24)}
        background: #268CFF;
      `)}
    }

    /* logo */
    ${before(css`
      margin-left: 16px;
      ${whpx(150, 58)}
      ${bgImg(imgLogo, 'auto')}
    `)}
  }

  /* 体 */
  > main {
    position: relative;
    ${flex('center')}
    height: var(--var-main-height);
    overflow: hidden;

    > figure {
      flex: 1;
      margin: 0;
      height: 100%;
    }

    > section {
      flex: 1;
      ${flex('center')}

      > .login-panel {
        position: relative;
        ${whpx(450, 520)}
        background: rgba(255,255,255,0.4);
        border-radius: 8px;
        border: 2px solid #FFFFFF;
        z-index: 1;

        ${before(css`
          position: absolute;
          left: 0;
          top: 0;
          filter: blur(90px);
          width: 100%;
          height: 100%;
          background: #fff;
          z-index: -1;
        `)}

        /* 登录类型 */
        > .login-logo {
          position: relative;
          ${flex('center')}
          margin: 0 auto;
          margin-top: 56px;
          margin-bottom: 36px;
          width: 340px;
          border-bottom: 2px solid #ABB9CF;

          ${before(css`
            margin-bottom: 36px;
            ${whpx(190, 58)}
            ${bgImg(imgLoginLogo)}
          `)}

          ${after(css`
            position: absolute;
            bottom: -3px;
            height: 5px;
            width: 90px;
            background-color: #268CFF;
          `)}
        }

        /* 登录表单 */
        > .login-form {
          > .ex-form-item {
            margin: 0 auto;
            margin-bottom: 0;
            width: 340px;

            &:first-child {
              margin-bottom: 40px;
            }

            .ant-input-affix-wrapper {
              padding: 7px;
              border-radius: 0;

              > .ant-input-suffix {

                > .ant-input-password-icon {
                  > .ex-icon {
                    color: rgba(0, 0, 0, 0.25);
                    transition: color 0.3s ease;
                    &.visible {
                      color: #268cff !important;
                    }
                  }

                  &:hover > .ex-icon {
                    color: rgba(0, 0, 0, 0.45);
                  }
                }
              }
            }

            .label {
              ${flex('center')}
              margin-right: 8px;
              padding-right: 8px;
              ${whpx(56, 30)}
              border-right: 1px solid #d1d9e2;
              ${font(14, 'bold', 'rgba(36, 48, 66, 1)')}

              &.username::before {
                ${before2block('用户名')}
              }
              &.password::before {
                ${before2block('密码')}
              }
            }
          }
        }

        /* 登录按钮 */
        > .login-btn {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 72px;
          display: block;
          width: 340px;
          height: 46px;
          border-radius: 0;
        }
      }
    }
  }

  /* 脚 */
  > footer {
    ${flex('center')}
    height: var(--var-footer-height);
    ${font(12, 'normal', '#6E7C94')}
    border-top: 1px solid #fff;
    background-color: rgba(255,255,255,0.6);
  }
`
